<template>
  <el-card shadow="always" class="operator">
    <div>
      <div
        style="
          margin: 20px 0px 0px 20px;
          display: flex;
          justify-content: space-between;
        ">
        <div><span>算子管理</span></div>
        <div>
          <el-input
            v-model="search"
            size="mini"
            placeholder="输入算子名称搜索"
            style="width: 200px; margin-right: 20px" />
          <!-- <el-input
            v-model="searchtype"
            size="mini"
            placeholder="输入算子类型搜索"
            style="width: 200px; margin-right: 20px"
            @blur="checkInput" /> -->
<!--          <el-select-->
<!--            v-model="value"-->
<!--            placeholder="请选择类型"-->
<!--            size="mini"-->
<!--            style="margin-right: 20px">-->
<!--            <el-option label="全部" :value="0"></el-option>-->
<!--            <el-option label="类别1" :value="1"></el-option>-->
<!--            <el-option label="类别2" :value="2"></el-option>-->
<!--          </el-select>-->
          <el-select
            v-model="tagValue"
            placeholder="请选择标签"
            size="mini"
            style="margin-right: 20px">
            <el-option label="全部" :value="0"></el-option>
            <el-option
              v-for="item in tagItem"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
          <el-button type="primary" size="mini" @click="handleSearch">
            查询
          </el-button>
          <el-button
            type="primary"
            size="mini"
            style="margin-right: 120px"
            @click="onAdd">
            新增
          </el-button>
        </div>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%; margin-top: 50px"
        @row-click="handleClick">
        <el-table-column prop="classname" label="算子类名" width="100">
        </el-table-column>
        <el-table-column prop="name" label="算子名称" >
        </el-table-column>
        <el-table-column prop="description" label="描述" >
        </el-table-column>
<!--        <el-table-column-->
<!--          prop="type"-->
<!--          label="类型"-->
<!--          :formatter="formatType"-->
<!--          >-->
<!--        </el-table-column>-->
<!--        <el-table-column-->
<!--          prop="tag_id"-->
<!--          label="标签"-->
<!--          :formatter="formatTag"-->
<!--          >-->
<!--        </el-table-column>-->
        <el-table-column prop="tag_text" label="标签" >
        </el-table-column>
        <el-table-column prop="function" label="方法名称" >
        </el-table-column>
        <el-table-column prop="fromfieldtype" label="来源字段类型" >
        </el-table-column>
        <el-table-column prop="tofieldtype" label="目标字段类型" >
        </el-table-column>
        <el-table-column prop="path" label="路径"> </el-table-column>
        <el-table-column prop="createtime" label="创建时间" width="150">
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="editRow(scope.row)"
              >编辑</el-button
            >
            <template>
              <el-popconfirm
                title="确定删除吗？"
                @confirm="deleteRow(scope.row)">
                <el-button
                  type="text"
                  size="small"
                  style="color: red; margin-left: 10px"
                  slot="reference"
                  >删除</el-button
                >
              </el-popconfirm>
            </template>
            <!-- <el-button
              type="text"
              size="small"
              style="color: red"
              @click="deleteRow(scope.row)">
              删除
            </el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <Customdialog
        v-if="dialogOptions.visible"
        :options="dialogOptions"
        :row="currentRow"
        @onEditClose="onEditClose"
        @onAddClose="onAddClose" />
    </div>
    <!-- 页码 -->
    <el-pagination
      style="margin-top: 10px"
      layout="total,  prev, next, pager, jumper"
      :pageSize="pagination.pageSize"
      :total="pagination.total"
      :pageSizes="pagination.pageSizes"
      @current-change="pageChange"
      @size-change="sizesChange">
    </el-pagination>
  </el-card>
</template>

<script>
  import Customdialog from "./components/index.vue";
  export default {
    components: {
      Customdialog,
    },
    data() {
      return {
        currentRow: null,
        dialogOptions: {
          title: "",
          visible: false,
          size: "small-dialog-box",
        },

        tableData: [
          {
            classname: "Operator11",
            name: "String去空格后转Integer",
            description: "String去空格后转Integer",
            path: "D:\\dev\\FormatTool\\FormatTools\\run\\operator\\Drive.class",
            tag_id: "基础数据类型",
            function:"convert",
            fromfieldtype:"String",
            tofieldtype:"Integer",
            createtime: "2024-07-12",

          },
        ],
        //标签
        tagValue: 0,
        tagItem: [
          { id: 2, name: "test1" },
          { id: 3, name: "test2" },
        ],
        // 类型
        value: 0,
        search: "",
        searchtype: null,
        // 分页参数
        pagination: {
          pageSize: 10,
          pageSizes: [10, 20],
          currentPage: 1,
          total: 50,
          layout: "total, sizes, prev, pager, next, jumper",
          onSizeChange: this.onSizeChange,
          onCurrentChange: this.onCurrentChange,
          order_field: "",
          order_type: "",
        },
      };
    },
    created() {
      this.init();
    },
    watch: {},
    methods: {
      init() {
        this.getAll();
        this.getTagAll();
      },
      //查询所有标签
      getTagAll() {
        let result = window.iTag.getAll();
        let res = JSON.parse(result);
        this.tagItem = res.data;
      },
      //查询所有算子
      getAll() {
        let item = {

        };
        let itemJosn = JSON.stringify(item);
        let result = window.iOperator.findOperatorList(
          itemJosn,
          this.pagination.currentPage,
          this.pagination.pageSize
        );
        let res = JSON.parse(result);
        // this.tableData = res.data;
        this.tableData = res.data.dataList;
        this.pagination.total = res.data.total;
        // this.pagination.pageSize = res.totalPage;

        // this.tableData.forEach((item) => {
        //   const timestamp = item.createtime;
        //   const date = new Date(timestamp);
        //   const formattedDate = date.toLocaleString().replace(/\//g, "-");
        //   item.createtime = formattedDate;
        // });
        // for (let i = 0; i < this.tableData.length; i++) {
        //   const item = this.tableData[i];
        //   const timestamp = item.createtime;
        //   const date = new Date(timestamp);
        //   const formattedDate = date.toLocaleString().replace(/\//g, "-");
        //   item.createtime = formattedDate;
        // }

      },
      //搜索
      handleSearch() {
        let item = {
          name: this.search,
          tag_id: this.tagValue,
          // type: this.value,
        };
        let itemJosn = JSON.stringify(item);
        let result = window.iOperator.findOperatorList(
          itemJosn,
          this.pagination.currentPage,
          this.pagination.pageSize
        );
        let res = JSON.parse(result);
        this.tableData = res.data.dataList;
        this.pagination.total = res.data.total ;
        // if (this.search) {
        //   this.tableData = this.tableData.filter((row) => {
        //     return Object.values(row).some((text) =>
        //       text.includes(this.search)
        //     );
        //   });
        // } else {
        //   this.getAll();
        // }
      },

      handleClick(row) {
        // console.log(row);
      },
      //新增
      onAdd() {
        this.dialogOptions.title = "新增";
        this.dialogOptions.visible = true;
        this.currentRow = null;
      },
      //编辑
      editRow(row) {
        this.currentRow = row;
        // console.log("🚀 ~ editRow ~  this.currentRow :", this.currentRow);
        this.dialogOptions.title = "编辑";
        this.dialogOptions.visible = true;
      },
      // 删除
      deleteRow(row) {
        console.log("🚀 ~ deleteRow ~ scope:", row);
        var result = window.iOperator.deleteOperator(row.id);
        let res = JSON.parse(result);
        if (res.code == 1) {
          this.$message.success(res.msg);
          let newPageing = Math.ceil(
            (this.pagination.total - 1) / this.pagination.pageSize
          ); //Math.ceil向上取整算出新的分页
          let currentPage =
            this.pagination.currentPage > newPageing
              ? newPageing
              : this.pagination.currentPage; //计算当前页应该是哪页
          this.pagination.currentPage = currentPage < 1 ? 1 : currentPage; //把当前页的值赋给this.page,重新渲染列表
          // this.getAll();
        } else {
          this.$message.error(res.msg);
        }
        this.getAll();
        // this.tableData = this.tableData.filter((item) => item !== row);
      },
      onEditClose(data) {
        console.log("🚀 ~ onEditClose ~ data:", data);
        this.currentRow = data;
        if (data) {
          const params = JSON.stringify(data);
          let result = window.iOperator.updateOperator(params);
          let res = JSON.parse(result);
          if (res.code == 1) {
            this.$message.success(res.msg);
          } else {
            this.$message.error(res.msg);
          }
          this.getAll();
        } else {
          this.currentRow = null;
        }
        this.dialogOptions.visible = false;
        // console.log("🚀 ~ onEditClose ~ this.currentRow:", this.currentRow);
        // if (data) {
        //   // const params = JSON.stringify(data);
        //   // console.log("🚀 ~ onEditClose ~ params:", params);
        //   // var data = iArea.editArea(params);
        //   // var res = JSON.parse(data);
        //   // // this.$message.success(res.msg);
        //   // this.$message({
        //   //   message: res.msg,
        //   //   type: "success",
        //   //   duration: 1000,
        //   // });
        //   // console.log("🚀 ~ onEditClose ~ res:", res);
        //   // // 刷新列表
        //   // this.getData();
        // } else {
        //   this.currentRow = null;
        //   this.dialogOptions.visible = false;
        // }
      },
      onAddClose(data) {
        console.log("🚀 ~ onAddClose ~ data:", data);
        // this.tableData.push(data);
        if (data) {
          const params = JSON.stringify(data);
          let result = window.iOperator.addOperator(params);
          let res = JSON.parse(result);
          if (res.code == 1) {
            this.$message.success(res.msg);
          } else {
            this.$message.error(res.msg);
          }
          this.getAll();
        }
        this.dialogOptions.visible = false;
      },
      //当前页数监听
      pageChange(val) {
        console.log("🚀 ~ pageChange ~ val:", val);
        this.pagination.currentPage = val;
        this.getAll();
      },
      //每页条数监听
      sizesChange(val) {
        console.log("🚀 ~ sizesChange ~ val:", val);
        this.pagination.pageSize = val;
        this.getAll();
      },
      checkInput() {
        if (isNaN(this.searchtype)) {
          this.$message.error("请输入数字");
          this.inputValue = null;
        }
      },
      //类型数字转文字
      formatType(row) {
        if (row.type === 0) {
          return "全部";
        } else if (row.type === 1) {
          return "类别1";
        } else if (row.type === 2) {
          return "类别2";
        }
      },
      //标签数字转文字
      getTagNameById(tagId) {
        for (let item of this.tagItem) {
          if (item.id === tagId) {
            return item.name;
          }
        }
        return "";
      },
      formatTag(row) {
        return this.getTagNameById(row.tag_id);
      },
    },
  };
</script>
<style scoped>
  .operator {
    width: 100%;
    height: 98%;
  }
  /* :deep .el-table__body,
  .el-table__footer,
  .el-table__header {
    width: 100% !important;
  } */
</style>
